<template>
	<Layout showFooter :innerBottom="true">
		<template #title>商品详情</template>
		<view class="inline-flex fill jcc product-picture">
			<image class="product-picture__image" :src="detail.mainImgUrl"></image>
		</view>

		<!-- 只有文书模板、代写文书、法律咨询 才显示 -->
		<template
			v-if="serviceType === ServiceType.WritTemplate || serviceType === ServiceType.GhostwriteWrit || serviceType === ServiceType.LegalConsulting">
			<view class="inline-flex fill jcsb aic product-sale">
				<view class="inline-flex product-sale__left ">
					<view class="rmb">
						<text class="rmb-symbol">¥</text>
						<text class="rmb-price">{{pennyToDollarFormat(detail.priceFee)}}</text>
						<text class="rmb-unit">件</text>
						<view class="inline-flex aic rmb-other">¥{{pennyToDollarFormat(detail.marketPriceFee)}}起</view>
					</view>
				</view>
				<view class="inline-flex product-sale__right">
					<text>已售</text>
					<text class="sales-volume">{{detail.totalSales??0}}</text>
					<text>份</text>
				</view>
			</view>

		</template>

		<view class="inline-flex fill service-title">
			{{detail.spuName}}
			<!-- <template v-if="serviceType === ServiceType.WritTemplate">
				文书模板
			</template>

			<template v-else-if="serviceType === ServiceType.GhostwriteWrit">
				公司律师函代写服务
			</template>

			<template v-else-if="serviceType === ServiceType.LegalConsulting">
				公司律师咨询服务
			</template>

			<template v-else-if="serviceType === ServiceType.LegalCounsel">
				律所法律顾问
			</template>

			<template v-else-if="serviceType === ServiceType.LitigationService">
				公司律师诉讼服务
			</template> -->
		</view>
		<view class="inline-flex fill service-intro">
			<u-parse :html="detail.spuDesc"></u-parse>
		</view>

		<view class="inline-flex service-tabs">
			<u-tabs style="width: 100%;" height="64" fontSize="28" bgColor="#F6F6F6" activeColor="#000000"
				:activeItemStyle="{fontSize:'32rpx'}" inactiveColor="#6E6E6E" barHeight="3" :list="tabs" barWidth="60"
				:barStyle="{backgroundColor:'#FF710A'}" :is-scroll="true" v-model="current"></u-tabs>
		</view>
		<ProductInfo v-if="current === 0" :content="detail.spuDetail"></ProductInfo>
		<CommentDetail v-if="current === 1" :spuId="spuId"></CommentDetail>

		<template #footer>
			<view class="inline-flex fill jcsb aic service-detail-footer">
				<!-- 文书模板 -->
				<template v-if="serviceType === ServiceType.WritTemplate">
					<view class="inline-flex sdf-left summation">
						<text class="summation__text">合计：</text>
						<view class="rmb">
							<text class="rmb-symbol">￥</text>
							<text class="rmb-price">{{pennyToDollarFormat(detail.priceFee)}}</text>
						</view>
					</view>

					<view class="inline-flex sdf-right">
						<u-button size="submajor" type="primary" @click="tapToPayDetail">
							<text>支付下载</text>
						</u-button>
					</view>
				</template>
				<!-- 代写文书 -->
				<template v-else-if="serviceType === ServiceType.GhostwriteWrit">
					<view class="inline-flex sdf-left">
						<view class="inline-flex column jcsb sdf-icon" @click.stop="tapToHome">
							<image src="/static/image/service/home.png"></image>
							<text>首页</text>
						</view>
						<view class="inline-flex column jcsb sdf-icon" @click.stop="tapToChat">
							<image src="/static/image/service/online.png"></image>
							<text>客服</text>
						</view>
					</view>

					<view class="inline-flex sdf-right">
						<u-button size="submajor" type="primary" @click="tapToPayDetail">
							<view class="rmb">
								<text class="rmb-symbol">￥</text>
								<text class="rmb-price">{{pennyToDollarFormat(detail.priceFee)}}</text>
							</view>
							<view class="split-line"></view>
							<text>立即购买</text>
						</u-button>
					</view>
				</template>

				<!-- 法律咨询 -->
				<template v-else-if="serviceType === ServiceType.LegalConsulting">
					<view class="inline-flex sdf-left">
						<view class="inline-flex column jcsb sdf-icon" @click.stop="tapToHome">
							<image src="/static/image/service/home.png"></image>
							<text>首页</text>
						</view>
						<view class="inline-flex column jcsb sdf-icon" @click.stop="tapToChat">
							<image src="/static/image/service/online.png"></image>
							<text>客服</text>
						</view>
					</view>

					<view class="inline-flex sdf-right">
						<u-button size="submajor" type="primary" @click="tapToPayDetail">
							立即购买
						</u-button>
					</view>
				</template>

				<!-- 法律顾问、诉讼服务 -->
				<template v-else>
					<view class="inline-flex sdf-left">
						<view class="inline-flex column jcsb sdf-icon" @click.stop="tapToHome">
							<image src="/static/image/service/home.png"></image>
							<text>首页</text>
						</view>
						<view class="inline-flex column jcsb sdf-icon" @click.stop="tapToChat">
							<image src="/static/image/service/online.png"></image>
							<text>客服</text>
						</view>
					</view>

					<view class="inline-flex sdf-right">
						<view class="iflex aic jcc actions">
							<view @click.native="tapToLeaveMessage">我要留言</view>
							<view class="split-line"></view>
							<view @click.stop="tapToChat">立即咨询</view>
						</view>
					</view>
				</template>
			</view>
		</template>
	</Layout>
</template>

<script setup lang="ts">
	import Layout from '@/components/layout/layout.vue';
	import ProductInfo from './components/product-intro/product-intro.vue';
	import CommentDetail from './components/comment-detail/comment-detail.vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { ServiceType } from '@/utils/constant';
	import { ref } from 'vue';
	import { getSpuDetail } from '@/apis/service';
	import { pennyToDollarFormat } from '@/utils/format';
	import type { AnyObj } from '@/types/global';
	import { sendTextMsg, toChat } from '@/im';
	const spuId = ref('');
	const serviceType = ref<ServiceType>(ServiceType.None)
	const current = ref(0);
	const tabs = ref<{ name : string; }[]>([
		{ name: '商品介绍' }
	]);

	const detail = ref<AnyObj>({});


	function tapToHome() {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}

	function tapToChat() {
		let msg = '';
		switch (serviceType.value) {
			// 文书模板、代写文书、咨询服务
			case 1:
				break;
			case 2:
				msg = `你好，我想要咨询【法务服务-代写文书】，${detail.value.spuName}`
				break;
			case 3:
				msg = `你好，我想要咨询【法务服务-法律咨询】，${detail.value.spuName}`
				break;
			case 4:
				msg = `你好，我想要咨询【法务服务-法律顾问】，${detail.value.spuName}`
				break;
			case 5:
				msg = `你好，我想要咨询【法务服务-诉讼服务】，${detail.value.spuName}`
				break;
		}
		sendTextMsg({
			body: msg,
			ext: msg.length
		}, true);
	}

	function tapToPayDetail() {
		console.log(serviceType.value);
		switch (serviceType.value) {
			// 文书模板、代写文书、咨询服务
			case 1:
			case 2:
			case 3:
				uni.navigateTo({
					url: `/pages-service/pay-detail/pay-detail?spuId=${spuId.value}`
				})
				break;
			// 代写文书
			// uni.navigateTo({
			// 	url: `/pages-service/ghostwrite-pay-detail/ghostwrite-pay-detail?spuId=${spuId}`
			// })
			// break;
			case 4:
			case 5:
				break;
		}
	}

	function loadData() {
		getSpuDetail(spuId.value).then((result) => {
			if (result.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: result.msg ?? '服务器忙，请稍后再试'
				});
				return;
			}
			detail.value = result.data;
			console.log(result);
			serviceType.value = result.data.categoryParentId;
			switch (result.data.categoryParentId) {
				case 1:
				case 2:
				case 3:
					tabs.value = [{ name: '商品介绍' }, { name: '评价详情' }];
					break;
				case 4:
				case 5:
					tabs.value = [{ name: '商品介绍' }];
					break;
			}
		});
	}

	function tapToLeaveMessage() {
		console.log('liuyan');
		uni.navigateTo({
			url: `/pages-service/leave-message/leave-message?bizId=${spuId.value}`
		});
	}

	onLoad((option) => {
		option = option as { spuId : string; };
		spuId.value = option.spuId;
		loadData();
	});
</script>

<style lang="scss">
	.product-picture {
		padding-top: 30rpx;

		&__image {
			width: 690rpx;
			height: 420rpx;
			border-radius: 12rpx;
		}
	}

	.product-sale {
		height: 94rpx;
		padding: 40rpx 30rpx 0 30rpx;

		&__left {
			// align-items: flex-end;

			.rmb {
				&-symbol {
					color: #f65c5c;
					font-size: 28rpx;
					font-weight: 500;
				}

				&-price {
					line-height: 44rpx;
					font-size: 44rpx;
					color: #f65c5c;
					font-weight: 600;
				}

				&-unit {
					color: #000000;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;
				}

				&-other {
					padding-left: 8rpx;
					height: 100%;
					color: #b3b3b3;
					font-family: "PingFang SC";
					font-size: 24rpx;
					font-weight: 400;
					text-decoration: line-through;
				}
			}
		}

		&__right {
			align-items: flex-end;

			text {
				color: #929292;
				font-family: "PingFang SC";
				font-size: 20rpx;
				font-weight: 400;
			}

			.sales-volume {
				padding: 0 8rpx;
				color: #000000;
				font-family: "DIN-Medium";
				font-size: 28rpx;
				line-height: 28rpx;
				font-weight: 400;
			}
		}
	}

	.service-title {
		margin-top: 30rpx;
		padding: 0 32rpx;
		color: #000000;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-weight: 500;
	}

	.service-intro {
		padding: 32rpx;
		margin-top: 24rpx;
		background-color: white;
		color: #929292;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-weight: 400;
		line-height: 48rpx;
	}

	.service-tabs {
		padding: 24rpx 0;
	}

	.service-detail-footer {
		padding: 32rpx;

		.sdf {
			&-left {
				.sdf-icon {
					height: 78rpx;

					&+.sdf-icon {
						margin-left: 52rpx;
					}

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						height: 28rpx;
						line-height: 28rpx;
						color: #666666;
						font-size: 20rpx;
						font-weight: 400;
					}
				}

				.rmb {
					&-symbol {
						color: #F65C5C;
						font-family: "PingFang SC";
						font-size: 28rpx;
						font-weight: 500;
					}

					&-price {
						line-height: 52rpx;
						font-size: 52rpx;
						color: #F65C5C;
						font-weight: 600;
					}
				}

				&.summation {
					align-items: flex-end;

					&__text {
						color: #000000;
						font-family: "PingFang SC";
						font-size: 28rpx;
						font-weight: 400;
					}
				}
			}

			&-right {

				.split-line {
					width: 2rpx;
					height: 55rpx;
					background: #ffffff59;
					margin: 0 56rpx;
				}

				.rmb {
					&-symbol {
						color: #ffffff;
						font-family: "PingFang SC";
						font-size: 28rpx;
						font-weight: 500;
					}

					&-price {
						color: #ffffff;
						font-family: "DIN-Bold";
						font-size: 36rpx;
						font-weight: 400;
					}
				}

				.actions {
					width: 474rpx;
					height: 84rpx;
					flex-shrink: 0;
					border-radius: 12rpx;
					background: #FF710A;
					color: white;
					font-size: 32rpx;
					font-weight: 400;
				}
			}
		}


	}
</style>